function Vue(options) {
    this.$options = options;
    this.$data = options.data();
    observe(this.$data);
    proxy(this.$data, this);
}

Vue.prototype.$mount = function(sel) {
    // 定义更新函数
    this.$update = function() {
        const child = this.$options.render.call(this);
        const parent = document.querySelector(sel);
        // 还没有挂载
        if (!this.isMounted) {
            parent.appendChild(child);
            this.isMounted = true;
            // 执行mounted生命周期钩子
            if (this.$options.mounted) {
                this.$options.mounted.call(this)
            }
        } else {
            // 全量更新DOM
            parent.innerHTML = "";
            // 重新挂载刷新数据
            parent.appendChild(child);
        }
    }
    // 执行更新函数
    this.$update()
}

// 代理数据
function proxy(data, vm) {
    Object.keys(data).forEach(key => {
        Object.defineProperty(vm, key, {
            get() {
                return data[key];
            },
            set(newVal) {
                data[key] = newVal;
            },
        })
    })
}

// 响应式数据
function observe(data) {
    if (Array.isArray(data)) {

    } else if(typeof data === 'object') {
        Object.keys(data).forEach(key => {
            defineReactive(data, key, data[key]);
        })
    }
}

function defineReactive(obj, key, val) {
    if (typeof val === 'object') {
        observe(val)
    }
    Object.defineProperty(obj, key, {
        get() {
            console.log("get", val);
            // 在这里收集依赖
            return val;
        },
        set(newVal) {
            //更新数据
            val = newVal;
            // 在这里更新视图
            vm.$update();
        },
    })
}